<template>
    <div style="height: 100%;width: 100%;display: flex">
        <div class="div-heatmap"></div>
        <el-checkbox-group class="layer-checkbox" v-model="layerList">
            <el-checkbox label="态势分析"></el-checkbox>
            <el-checkbox label="战略航道"></el-checkbox>
            <el-checkbox label="识别圈"></el-checkbox>
            <el-checkbox label="基地"></el-checkbox>
        </el-checkbox-group>
        <div v-for="item in circleList">
            <div  v-show="item.alarmShow" href="alarmDialog" ></div>
                <img src="../assets/imgs/situation/hongseyujing.png">
        </div>
    </div>

</template>
<script>
    import planeImg from "./../assets/imgs/icon_plane.png";
    import Track from './../assets/utils/Track'
    import * as request from "../http/request.js"
    import blueShip from "./../assets/imgs/navigation-log/blueShip.png";
    import blueaircraft from "./../assets/imgs/navigation-log/blueaircraft.png";

    import * as Cesium from 'cesium/Cesium'
    import 'cesium/Widgets/widgets.css'

    export default {
        name: 'situationRealtime',
        data() {
            return {
                layerList: ['态势分析', '战略航道'],
                channelList: [{
                    name: '第一航道',
                    points: [[127.619721, 5.38461], [126.111142, 2.909345], [124.142632, 3.149798]],
                }, {
                    name: '第二航道',
                    points: [[127.619721, 9.38461], [126.111142, 9.09345], [124.142632, 9.149798]]
                }],
                circleList: [{
                    name: '识别圈1',
                    points: [127.619721, 5.38461],
                    innerRadius: 100000,
                    outerRadius: 200000,
                    alarmShow:true,
                }, {
                    name: '识别圈2',
                    points: [117.619721, 9.38461],
                    innerRadius: 200000,
                    outerRadius: 300000,
                    alarmShow:false,
                }]
            }
        },
        mounted() {
            viewer.entities.removeAll()
            this.showFlight()
            this.showChannel()
            this.showCircle()
        },
        methods: {
            showFlight(data) {
                data = [{
                    type: 'ship',
                    color: 'blue',
                    name: '1',
                    points: [
                        0,
                        129.93797,
                        39.50935,
                        1776,
                        100,
                        130.93822,
                        39.50918,
                        1773,
                        200,
                        131.9385,
                        39.80883,
                        1772,
                        300,
                        132.93855,
                        39.90842,
                        1770,
                        400,
                        133.93868,
                        40.50792,
                        1770]
                }, {
                    type: 'plane',
                    color: 'blue',
                    name: '2',
                    points: [
                        0,
                        119.93797,
                        39.50935,
                        1776,
                        50,
                        120.93822,
                        39.50918,
                        1773,
                        100,
                        121.9385,
                        39.80883,
                        1772,
                        200,
                        122.93855,
                        39.90842,
                        1770,
                        400,
                        123.93868,
                        40.50792,
                        1770,
                        900,
                        124.93868,
                        42.50792,
                        1770,
                        2400,
                        126.93868,
                        44.50792,
                        1770]
                }, {
                    type: 'plane',
                    color: 'blue',
                    name: '3',
                    points: [
                        0,
                        124.93797,
                        19.50935,
                        1776,
                        30,
                        123.93822,
                        20.50918,
                        1773,
                        60,
                        120.9385,
                        21.80883,
                        1772,
                        80,
                        112.93855,
                        22.90842,
                        1770,
                        140,
                        113.93868,
                        23.50792,
                        1770]
                }]

                for (let i = 0; i < data.length; i++) {
                    let typeImg;
                    if (data[i].type == 'ship') {
                        typeImg = blueShip
                    } else if (data[i].type == 'plane') {
                        typeImg = blueaircraft
                    }
                    const czml = [
                        {
                            id: "document",
                            name: "CZML Path" + i,
                            version: "1.0",
                            clock: {
                                interval: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                                currentTime: "2012-08-04T10:00:00Z",
                                multiplier: 10,
                            },
                        },
                        {
                            id: "path" + i,
                            name: "path with GPS flight data",
                            availability: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                            path: {
                                material: {
                                    polylineOutline: {
                                        color: {
                                            rgba: [255, 0, 255, 255],
                                        },

                                        outlineWidth: 2,
                                    },
                                },
                                width: 5,
                                leadTime: 10, //路径的前导时间
                                trailTime: 1000, //路径的尾迹时间
                                resolution: 5, //路径的分辨率
                                show: false  //不显示轨迹
                            },
                            billboard: {
                                image: typeImg,
                                width: 27,
                                height: 27,
                                scale: 1,
                                eyeOffset: {
                                    cartesian: [0.0, 0.0, -1.0],
                                },
                            },
                            position: {
                                epoch: "2012-08-04T10:00:00Z",
                                cartographicDegrees: data[i].points,
                            },
                        },
                    ];

                    const dataSource = viewer.dataSources.add(
                        Cesium.CzmlDataSource.load(czml)
                    );
                    // viewer.trackedEntity = dataSource.entities.getById("path"+i);

                }
                /*const czml = [
                    {
                        id: "document",
                        name: "CZML Path",
                        version: "1.0",
                        clock: {
                            interval: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                            currentTime: "2012-08-04T10:00:00Z",
                            multiplier: 10,
                        },
                    },
                    {
                        id: "path",
                        name: "path with GPS flight data",
                        availability: "2012-08-04T10:00:00Z/2012-08-04T15:00:00Z",
                        path: {
                            material: {
                                polylineOutline: {
                                    color: {
                                        rgba: [255, 0, 255, 255],
                                    },

                                    outlineWidth: 2,
                                },
                            },
                            width: 5,
                            leadTime: 10, //路径的前导时间
                            trailTime: 1000, //路径的尾迹时间
                            resolution: 5, //路径的分辨率
                        },
                        billboard: {
                            image:blueShip,
                            width: 20,
                            height: 20,
                            scale: 1,
                            eyeOffset: {
                                cartesian: [0.0, 0.0, -1.0],
                            },
                        },
                        position: {
                            epoch: "2012-08-04T10:00:00Z",
                            cartographicDegrees: [
                                0,
                                129.93797,
                                39.50935,
                                1776,
                                10,
                                130.93822,
                                39.50918,
                                1773,
                                20,
                                131.9385,
                                39.80883,
                                1772,
                                30,
                                132.93855,
                                39.90842,
                                1770,
                                40,
                                133.93868,
                                40.50792,
                                1770,
                                50,
                                134.93877,
                                41.50743,
                                1767,
                                60,
                                135.93862,
                                42.50697,
                                1771,
                                70,
                                136.93828,
                                39.50648,
                                1765,
                                80,
                                137.93818,
                                39.50608,
                                1770,
                                90,
                                138.93783,
                                39.5057,
                                1754,
                                100,
                                139.93777,
                                39.50513,
                                1732,
                                110,
                                139.93793,
                                39.50458,
                                1727,
                                120,
                                139.93815,
                                39.50415,
                                1717,
                                130,
                                139.94565,
                                39.44125,
                                568,
                                140,
                                139.94563,
                                39.44125,
                                567,
                                1500,
                                149.94563,
                                39.44125,
                                566,
                            ],
                        },
                    },
                ];

                const dataSource = viewer.dataSources.add(
                    Cesium.CzmlDataSource.load(czml)
                );
                viewer.trackedEntity = dataSource.entities.getById("path");*/

            },
            showChannel() {
                let data = this.channelList
                for (let i = 0; i < data.length; i++) {
                    let pointList = data[i].points
                    let lineData = [];
                    for (let i = 0; i < pointList.length; i++) {
                        lineData.push(pointList[i][0]);
                        lineData.push(pointList[i][1]);
                    }
                    viewer.entities.add({
                        name: "航道",
                        polyline: {
                            positions: Cesium.Cartesian3.fromDegreesArray(lineData),
                            width: 2,
                            arcType: Cesium.ArcType.RHUMB,
                            material: Cesium.Color.ORANGE
                        }
                    })
                }
            },
            showCircle() {
                for (let i = 0; i < this.circleList.length; i++) {
                    let point = this.circleList[i]
//绘制一个圆，center是中心点经纬度，radius是半径，vertexFormat是顶点格式
                    var circleGeometry1 = new Cesium.CircleGeometry({
                        center: Cesium.Cartesian3.fromDegrees(point.points[0],point.points[1]),
                        radius: point.innerRadius,
                        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                    });
                    //创建几何体实例，并将上面的圆添加进去，然后设置颜色
                    var circleInstance1 = new Cesium.GeometryInstance({
                        geometry: circleGeometry1,
                        attributes: {
                            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1, 0, 0, 0.7)),
                        },

                    });
                    //设置透明和封闭属性
                    var circlePrimitive1 = new Cesium.Primitive({
                        geometryInstances: [circleInstance1],
                        appearance: new Cesium.PerInstanceColorAppearance({
                            translucent: true,
                            closed: true
                        })
                    });
                    var circleGeometry2 = new Cesium.CircleGeometry({
                        center: Cesium.Cartesian3.fromDegrees(point.points[0],point.points[1]),
                        radius: point.outerRadius,
                        vertexFormat: Cesium.PerInstanceColorAppearance.VERTEX_FORMAT
                    });
                    //创建几何体实例，并将上面的圆添加进去，然后设置颜色
                    var circleInstance2 = new Cesium.GeometryInstance({
                        geometry: circleGeometry2,
                        attributes: {
                            color: Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 1.0, 0.0, 0.7)),
                        },

                    });
                    //设置透明和封闭属性
                    var circlePrimitive2 = new Cesium.Primitive({
                        geometryInstances: [circleInstance2],
                        appearance: new Cesium.PerInstanceColorAppearance({
                            translucent: true,
                            closed: true
                        })
                    });

                    viewer.scene.primitives.add(circlePrimitive1);
                    viewer.scene.primitives.add(circlePrimitive2);

                }


            },
            computeFlight(source) {
                /**
                 * 计算飞行
                 * @param source 数据坐标
                 * @returns {SampledPositionProperty|*}
                 */
                var property = new Cesium.SampledPositionProperty();
                for (var i = 0; i < source.length; i++) {
                    var time = Cesium.JulianDate.addSeconds(this.startTime, source[i].time, new Cesium.JulianDate());
                    var position = Cesium.Cartesian3.fromDegrees(parseFloat(source[i].longitude), parseFloat(source[i].dimension), source[i].height);
                    // 添加位置，和时间对应
                    property.addSample(time, position);
                }
                return property;
            },

        }
    }
</script>

<style lang="scss">
    $item-bg-color: rgba(0, 78, 126, .8);
    $item-bg-color2: rgba(27, 107, 156, .8);
    $text-color: #ffffff;
    #map3View {
        width: 100%;
        height: 100%;
    }

    .div-heatmap {
        width: 600px;
        height: 400px;
        display: none;
    }

    .layer-checkbox {
        position: absolute;
        right: 40px;
        top: 60px;
        background: #06123C;
        padding: 5px;

        .el-checkbox {
            color: #fff;
        }
    }
</style>
